<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="购买记录" ref="navbar" ></fa-navbar>
		<view class="u-p-20 u-bg-white u-flex u-col-center" style="width: 94%;margin: 0 auto;">
			<view class="u-flex-1"  style="width: 80%;">
				<fa-search :mode="2"></fa-search>
			</view>
			<view class="u-p-l-20 u-p-r-5 u-flex u-col-center">
				<button class="_btn" @click="goPage('/pages/my/user_tc_add?user_id='+user_id, true)">增加</button>
			</view>
		</view>
		<!-- 汇演列表 -->
		<view class="content" style="overflow-y: hidden;margin-top: 15px;">
			<view class="content_div" style="width: 100%">
				<!-- 表头 -->
				<view class="header">
					<view class="cell" style="width: 20%">时间</view>
					<view class="cell" style="width: 25%">套餐</view>
					<view class="cell" style="width: 15%">数量</view>
					<view class="cell" style="width: 20%">金额</view>
					<view class="cell" style="width: 20%">退货退款</view>
				</view>
				<!-- 数据行 -->
				<view class="row" v-for="(item, index) in tableData" :key="index">
					<view class="cell" style="width: 20%">{{ item.createtime }}</view>
					<view class="cell" style="width: 25%">{{ item.tc_name }}</view>
					<view class="cell" style="width: 15%">{{ item.num }}</view>
					<view class="cell" style="width: 20%">{{ item.price }}</view>
					<view class="cell" style="width: 20%" ><span class="_btn" v-if='item.t_status==0' @click="c_tk(item)">退</span><span class="_btn" v-if='item.t_status==1'>已退</span></view>
				</view>
			</view>
			<!-- <u-select v-model="showSelect" mode="single-column" :list="selectList" @confirm="confirm3"></u-select> -->
			<u-modal v-model="showSelect" title="退货退款" @confirm='confirm3' @cancel="cancel" show-cancel-button="true">
				<view class="slot-content" style="width: 80%;margin: 10px auto 0 auto;">
					<u-form-item label="状态:" label-width="100">
						<u-radio-group v-model="t_value">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in t_list" :key="index" 
								:name="item.name"
								:disabled="item.disabled"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="金额:" label-width="100">
						<u-input v-model="t_price" placeholder="请填写金额"/>
					</u-form-item>
				</view>
			</u-modal>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="tableData.length">
			<u-loadmore :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!tableData.length">
			<u-empty></u-empty>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>
<script>
	export default {
		onLoad(e) {
			let query = e || {};
			this.user_id = query.user_id || 0;
			this.is_update = true;
			this.getArchives();
		},
		data() {
			return {
				t_list: [
					{
						name: '未退',
						disabled: false
					},
					{
						name: '已退',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				t_value: '未退',
				t_price: 0,
				user_id: 0,
				id: 0,
				value: 0,
				shijjian: '',
				startDate:'',
				endDate:'',
				showSelect:false,
				selectList: [
					{
						value: '1',
						label: '同意'
					},
					{
						value: '2',
						label: '驳回'
					}
				],
				range: [
					{ value: 0, text: "全部" },
					{ value: 1, text: "当天" },
					{ value: 2, text: "本周" },
					{ value: 3, text: "本月" },
				],
				is_show:1,
				bgColor:'#f9f9f9',
				isTab: false,
				tabwidth: 40,
				tabList: [],
				current: 0,
				scrollTop: 0,
				list: [],
				status: 'loadmore',
				has_more: false,
				page: 1,
				channel_id: 0,
				is_update: false,
				options: [],
				tableData: [],
				page: 1,
				pageSize: 5,
				isLoading: false,
				hasMore: true,
				show: false,
				mode: 'range'
			};
		},
		methods: {
			radioChange(e) {
				console.log(e);
				this.t_value = e;
			},
			cancel: async function(e){
				this.showSelect = false;
			},
			confirm3: async function(e){
				console.log(e)
				this.showSelect = false;
				let data = {
					't_value':this.t_value,
					't_price':this.t_price,
					'id':this.id
				};
				let res = await this.$api.tuikuan(data);
				console.log(res,'res')
				if(res.code==1){
					uni.showToast({
						title: res.msg,
						icon: 'success',
						duration: 2000,
					});
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'success',
						duration: 2000,
					});
				}
				this.getArchives();
			},
			change(e) {
				console.log(e);
				if(e){
					this.startDate = e.startDate;
					this.endDate = e.endDate;
					this.shijjian = e.startDate+' 至 '+e.endDate;
				}
			},
			c_tk: async function(item, index) {
				// this.id = item.id
				uni.redirectTo({
					url: '/pages/my/user_thtk?archives_id='+item.id+'&user_id='+this.user_id+'&archives_name='+item.tc_name+'&archives_price='+item.price
				});
			},
			getArchives: async function() {
				let data = {
					page: this.page,
					member_id: this.user_id 
				};
				
				let res = await this.$api.mGmList(data);
				console.log(res,'1')
				if(res.data.length){
					this.tableData = this.tableData.concat(res.data);
					this.page+=1;
					if(res.data.length<10){
						this.has_more = false;
					}else{
						this.has_more = true;
					}
					
				}else{
					this.has_more = false;
				}
			},
			click(index, index1) {
				this.list[index].show = false;
				if (index1 == 1) {
					this.$api.deleteArchives({ id: this.list[index].id }).then(res => {
						this.$u.toast(res.msg);
						if (res.code) {
							this.list.splice(index, 1);
						}
					})
				} else {
					this.$u.route('/pages/publish/channel', { archives_id: this.list[index].id });
				}
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				});
			},
			goDetail(item, index) {
				let page = item.model_id == 2 ? '/pages/product/detail' : '/pages/article/detail';
				this.$u.route(page + '?id=' + item.id);
			},
			reload() {
				this.is_update = true;
				this.getArchives();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getArchives();
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>

	._btn{
		border: none;
		background: #e0ebdd;
		line-height: 34px;
		font-size: 14px;
		font-family: '微软雅黑';
		padding: 5px 15px;
	}
	.article {
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		width: 100vw;

		.left {
			image {
				width: 200rpx;
				height: 150rpx;
				flex: 0 0 120rpx;
				background-color: #f2f2f2;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 28rpx;

			.content {
				margin-bottom: 10rpx;

				.flag {
					display: inline-block;
				}
			}
		}
	}
	
	.c_date_left{
		width: 29%;float: left;font-size: 14px;line-height: 35px;text-align: center;
	}
	.c_date_right{
		width: 70%;float: left;line-height: 35px;
	}
	.u-bg-white{
		background: #f9f9f9;
	}
	.uni-select {
		border: none!important;
	}
	.container {
	  padding: 20rpx;
	  background-color: #ffffff;
	}
	
	.header, .row {
	  display: flex;
	  flex-wrap: nowrap;
	  border-bottom: 1rpx solid #e0e0e0;
	}
	
	.header {
	  background-color: #e0ebdd;
	  font-weight: bold;
	}
	
	.cell {
	  padding: 20rpx 10rpx;
	  border-right: 1rpx solid #e0e0e0;
	  font-size: 14px;
	  color: #333;
	  text-align: center;
	  line-height: 32px;
	  font-weight: normal;
	  font-family: '微软雅黑';
	}
	
	.last {
	  border-right: none !important;
	}
	
	/* 适配不同屏幕尺寸 */
	@media (max-width: 375px) {
	  .cell {
	    font-size: 24rpx;
	    padding: 15rpx 8rpx;
	  }
	}
</style>
